@charset "utf-8";
/* CSS Document */
@import url("reset.css");
@font-face {
    /* font-properties */
    font-family: Arial Bold;
    src:url('../fonts/ArialBoldMT.ttf'); /* IE9 */
}

html, body {
    position: relative;
    height: 100%;
}

body {
    background: url("../img/bg.png") no-repeat top center;
    background-size: 100% auto;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #000;
    margin: 0;
    padding: 0;
}
header{
    padding:2rem 1.7rem 0;
}
.title{
    width: 100% ;
    margin: 0 auto;
    height: 9rem;
    background: url("../img/title.png") no-repeat top center;
    background-size: 100% auto;
}

.container{
    position: relative;
}
.progress{
    width: 7.5rem;
    height: 7.5rem;
    background: url("../img/centent.png") no-repeat top center;
    background-size: 100% auto;
    position: absolute;
    left:47%;
    top: 47%;
    margin-left:-3.25rem;
    margin-top:-3.25rem;
    font-weight: bold;
    color: #666666;
    text-align: center;
    line-height: 7.5rem;
    font-size: 2.5rem ;
    font-family: Arial Bold;
}
.loading {
    margin: 0px auto;
    width: 17.14rem;
    height: 17.14rem;
    position: relative;
    background: url("../img/r-bg.png");
    background-size: 100% auto;
    position: relative;
}

.pie_left, .pie_right {
    width: 8.57rem;
    height: 17.14rem;
    overflow: hidden;
    position: relative;
    float: left;
}

.left, .right {
    width: 17.14rem;
    height: 17.04rem;
    position: absolute;
}

.left {
    left: 0px;
    background: url("../img/r-left.png") no-repeat left top;
    background-size: 50% auto;
    -moz-transform:rotate(0deg);
    -webkit-transform:rotate(0deg);
    transform:rotate(-180deg);
}

.right {
    right: 1px;
    background: url("../img/r-right.png") no-repeat right top;
    background-size: 50% auto;
    -moz-transform:rotate(0deg);
    -webkit-transform:rotate(0deg);
    transform:rotate(-180deg);
}
.right.r100{
    background: url("../img/r-100.png")no-repeat right top;
    background-size: 100% auto;
}

.bottom1{
    width: 20rem;
    height: 3.42em;
    margin: 0 auto;
    background: url("../img/km.png") no-repeat top center;
    background-size: 100% auto;
    overflow: hidden;
    position: relative;
}
.bottom1 span{
    font-weight: bold;
    color: #fff;
    text-align: center;
    line-height: 3.42rem;
    font-size: 2.5rem ;
    font-family: Arial Bold;
    padding-left: 11.2rem;
}
.bottom2{
    width: 20rem;
    height: 4.02em;
    margin: 2rem auto 0;
    background: url("../img/btn1.png") no-repeat top center;
    background-size: 100% auto;
    display: block;
}
.bottom3{
    width: 20rem;
    height: 4.02em;
    margin: 2rem auto 0;
    background: url("../img/btn2.png") no-repeat top center;
    background-size: 100% auto;
    display: block;
}

@media screen and (max-width: 414px) {


}

@media screen and (max-width: 375px) {


}

@media screen and (max-width: 320px) {
    header{
        padding-top: 1rem;
    }
    .title{
        height: 7rem;
    }
    .bottom2,.bottom3{
        margin-top: 1rem;;
    }
}
